import Head from 'next/head'
import { getMovies } from "../../services/mockService"
import Pager from  '../../components/Pager'
import { useRouter } from "next/router"

export default ({ movies, page, total, limit }) =>{
  // 客户端服务端都会执行
  // getMovies().then(resp => {
  //   console.log('getMovies:', resp.data)
  // }).catch((e) => {
  //   console.log('getMovies2:', e)
  // })

  // console.log('movie render')

  const router = useRouter()
  return <div>
    <Head>
      <title>电影页</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <h1>电影</h1>
    {
      movies.map((item) => (
        <div key={item._id} >
          <a href={`/moives/${item._id}`}>
            {item.name}
          </a>
        </div>
      ))
    }
    <Pager page={page} total={total} limit={limit} onPageChange={
      (newPage) => {
        // { shallow: true} 第三个参浅跳转 query改变服务端不执行
        // router.push(`/moives`, `/moives?page=${newPage}`)
        router.push(`/moives?page=${newPage}`)
      }
    }/>
  </div>
}

// 静态化 只在服务端运行 组件渲染之前 build期间运行 混合到整个组件属性 生成html+json
// export async function getStaticProps() {
//   const resp = await getMovies(1, 20)
//   return {
//     props: {
//       movies: resp.data
//     }
//   }
// }

// 每次请求到大后都会执行
// 仅在服务器运行
// req, res, query
export async function getServerSideProps({ query }) {
  const page = query && query.page ? +query.page : 1;
  const resp = await getMovies(page, 10)
  console.log('query.page', query);
  // console.log('length', page,  resp.data.length);
  return {
    props: {
      movies: resp.data,
      page: page,
      total: resp.count,
      limit: 10
    }
  }
}